<template>
	<!-- 编辑签单详情 -->
	<view class="wrap" style="position: relative;">
		<u-navbar :placeholder="true" title="编辑签单" @leftClick="goBack('/pages/signBill/index')">
		</u-navbar>
		<view class="wrap_box">
			<card title="航班信息" style="margin-top: 10px;position:relative;margin-bottom:10px">
				<template #main>
					<view v-if="BillInfo.signStatus=='1'" class="tag"
						style="right: 0px;top: 0px;background-color:#de000f;">
						待签字
					</view>
					<view v-else class="tag" style="right: 0px;top: 0px;background-color:#48a500;">
						已签字
					</view>
					<view class="itemList">
						<view class="item border" v-for="(item,index) in flightMsg" :key="index">
							<view class="left1">
								{{item.label}}
							</view>
							<view class="right1">
								{{BillInfo.billInfo[item.value]}}
							</view>
						</view>
					</view>
				</template>
			</card>

			<card title="签单数据服务内容">
				<template #resetBut>
					<u-button type="primary" :plain="true" size="mini" class="btn" @click="show=true">新增服务项</u-button>

				</template>
				<template #main>
					<view class="formList">
						<u-collapse accordion>
							<!-- 任务性质 -->
							<u-collapse-item name="Docs guide" :border="false">
								<text slot="title" class="u-page__item__title__slot-title">
									<view class="">
										<image src="@/static/images/icon/file.png" class="img"></image>
										<span>航班任务性质清单</span>
									</view>
								</text>
								<view class="itemList">

									<!-- <view class="item " v-for="(item) in BillInfo.billInfo.tasks" :key="item.name">
										<view class="left1">
											{{item.elementName}}
										</view>
										<view class="right2">

											<u-radio-group v-model="item.value">
												<u-radio v-for="(item2) in item.options" :key="item2.sort"
													:label="item2.elementName" :name="item2.elementName" shape="square"
													@change="groupChange(item,item2)">
												</u-radio>
											</u-radio-group>
										</view>
									</view> -->
									<view class="item" label-width="150px" style="display: block;">
										<view class="item-box" v-for="(item,index) in BillInfo.billInfo.tasks"
											:key="item.index">
											<view class="item-label">
												{{ item.elementName }}
											</view>
											<radio-group v-if="item.isMulti=='0'" class="radio-group"
												v-model="item.value" :data-id='index'
												@change="groupChange(item,$event)">
												<view v-for="(item2,index) in item.options" :key="index">
													<label>
														<view style="margin-top: 5px;">
															<radio :value="item2.elementName"
																:checked="item2.optionValue"
																style="transform:scale(0.7)" />
															{{ item2.elementName }}
														</view>
													</label>
												</view>
											</radio-group>
											<checkbox-group v-else class="radio-group" v-model="item.value"
												:data-id='index' @change="checkboxChange(item,$event)">
												<view v-for="(item2,index) in item.options" :key="index">
													<label>
														<view style="margin-top: 5px;">
															<checkbox class="my-checkbox" :value="item2.elementName"
																:checked="item2.optionValue"
																style="transform:scale(0.7)" />
															{{ item2.elementName }}
														</view>
													</label>
												</view>
											</checkbox-group>

										</view>
									</view>
								</view>
							</u-collapse-item>
							<!-- 特种设备 -->
							<u-collapse-item name="Docs guide" :border="true">
								<text slot="title" class="u-page__item__title__slot-title">
									<view class="">
										<image src="@/static/images/icon/file.png" class="img"></image>
										<span>人工服务及特种设备使用清单(例行服务)</span>
									</view>
								</text>
								<view class="itemList">
									<view class="itemHead"
										v-if="BillInfo.billInfo.items && BillInfo.billInfo.items.length>0">
										<view>
											服务项
										</view>
										<view>
											次数
										</view>
									</view>

									<view class="item " v-for="(item) in BillInfo.billInfo.items" :key="item.sort">
										<view class="left3" style="width:60%"
											@click="goTo('/pages/signBill/serviceDetail')">
											<view>{{item.chargeName}}</view>
											<!-- <view>{{item.chargeEnglish}}</view> -->
										</view>
										<view class="right3" style="width:35%">
											<u-number-box :min="0" v-model="item.value" :step="0.5" decimal-length="1">
											</u-number-box>
										</view>
									</view>

									<view class="itemHead"
										v-if="BillInfo.billInfo.timeItems && BillInfo.billInfo.timeItems.length>0">
										<view>
											服务项
										</view>
										<view>
											使用记录
										</view>
									</view>


									<view class="item2 border" v-for="(item,index) in BillInfo.billInfo.timeItems"
										:key="item.label">
										<view>
											<view>{{item.chargeName}}</view>
										</view>
										<u-datetime-picker :show="showTiem" v-model="datatime" mode="datetime"
											@confirm="confirm" @cancel="close"></u-datetime-picker>

										<view class="box">
											<span>开始时间</span>
											<u-button @click="changeItem(item,'start')" type="text">
												{{item.start==undefined?'请选择开始时间':item.start}}
											</u-button>
										</view>
										<view class="box">
											<span>结束时间</span>
											<u-button @click="changeItem(item,'end')" type="text">
												{{item.end==undefined?'请选择结束时间':item.end}}
											</u-button>
										</view>
										<view class="box">
											<span>使用时长</span>
											<view class="" style="width: 50%;display: flex;">
												{{item.start==undefined||item.end==undefined ?'请选择时间':timeLang(item)}}
											</view>
										</view>
									</view>
								</view>
							</u-collapse-item>

							<u-collapse-item name="Docs guide">
								<text slot="title" class="u-page__item__title__slot-title">
									<view class="">
										<image src="@/static/images/icon/file.png" class="img"></image>
										<span>非例行检查</span>
									</view>
								</text>
								<view class="itemList">

									<view class="itemHead" v-if="otherItem">
										<view>
											服务项
										</view>
										<view>
											服务记录
										</view>
									</view>

									<view class="item " v-for="(item) in BillInfo.billInfo.itemIs" :key="item.name">
										<view class="left3" style="width:50%">
											{{item.name}}
										</view>
										<view class="right3" style="width:25%;display: flex;align-items: center;">
											<u--input v-model="item.value1"></u--input>
											<view class="" style="margin: 0 10px 0 5px;">
												人
											</view>
										</view>
										<view class="right3" style="width:25%;display: flex;align-items: center;">
											<u--input v-model="item.value2"></u--input>
											<view class="" style="margin-left: 5px;">
												时长
											</view>
										</view>
									</view>
									<view class="item " v-for="(item) in BillInfo.billInfo.itemIIs" :key="item.name">
										<view class="left3" style="width:50%">
											{{item.name}}
										</view>

										<view class="right3" style="width:50%">
											<u--input v-model="item.value"></u--input>
										</view>

									</view>
								</view>
							</u-collapse-item>
						</u-collapse>


					</view>
				</template>
			</card>


			<view class="formTitle">
				<view class="msg" style="padding: 0 3%;">
					<span v-if="BillInfo.signStatus==1" class="" style="width:60%">
						填表时间：{{BillInfo.signedTime}}
					</span>
					<span v-if="BillInfo.signStatus==0" class="" style="width:60%">
						签字时间：{{BillInfo.signatureTime}}
					</span>
					<span class="" style="width:40%">
						填表人：{{BillInfo.signedBy}}
					</span>

				</view>
				<view class="msg">
					<u-button type="primary" :class="BillInfo.signStatus==1 ?'btn_left':'btn_mid'" size="small"
						@tap="save">保存单据</u-button>
					<u-button type="primary" class="btn_right " size="small" v-if="BillInfo.signStatus==1"
						@tap="showSign=true">签字</u-button>
				</view>
				<view class="imgs">
					<image :src="BillInfo.signatory ||signImg" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="modal" style="" v-show="show">
			<card title="新增服务项" class="modalItem">
				<template #main>
					<view class="serviceList">

						<view class="serviceItem" v-for="(item) in ChargeAssuranceLists" :key="item.id">
							<view class="item" v-if="item.value==true" style="background: #b9f6ff;"
								@click="changeState(item)">
								<image src="@/static/images/icon/check.png" mode=""></image>
								<view class="">{{item.chargeName}}</view>
								<!-- <span>{{item.chargeEnglish}}</span> -->
								<!-- <span>{{item.chargeBillTypeName}}</span> -->
								<span>{{item.chargeBillType}}</span>
							</view>
							<view class="item" v-else style="background: #f7fdff;" @click="changeState(item)">
								<view class="">{{item.chargeName}}</view>
								<!-- <span>{{item.chargeEnglish}}</span> -->
								<!-- <span>{{item.chargeBillTypeName}}</span> -->
								<span>{{item.chargeBillType}}</span>
							</view>
						</view>
						<view class="msg">
							<u-button type="primary" class="btn_left" size="small" @click="show=false">关闭</u-button>
							<u-button type="primary" class="btn_right " size="small"
								@click="changeChargeList">提交</u-button>
						</view>
					</view>
				</template>
			</card>
		</view>

		<view class="">
			<catSignature canvasId="canvas1" @close="showSign = false" @submit="submit" :visible="showSign" />
		</view>

	</view>
</template>

<script>
	import catSignature from "@/components/cat-signature/index.vue"
	import {
		getAction,
		postAction,
		httpAction,
		deleteAction
	} from "@/api/manage";
	import {
		mapState
	} from 'vuex';
	import {
		mapGetters
	} from "vuex";
	import {
		Value
	} from "sass";
	const dayjs = require("dayjs")
	export default {
		components: {
			catSignature,
		},
		data() {
			return {
				value: '',
				show: false,
				showTiem: false,
				// 签字
				showSign: false,
				// 航班信息
				flightMsg: [{
						label: "航空公司",
						value: 'info-airline'
					},
					{
						label: "航班日期",
						value: 'info-airDate'
					},
					{
						label: "航班号",
						value: 'info-fltNo'
					},
					{
						label: "航线",
						value: 'info-airRoute'
					},
					{
						label: "机号",
						value: 'info-regNo'
					},
					{
						label: "机型",
						value: 'info-icaoCode'
					},
					{
						label: "机位号",
						value: 'info-standNo'
					},
				],
				// 新增服务项
				ChargeAssuranceLists: [],
				activeItem: {},
				datatime: Number(new Date()),
				signImg: '',
			}
		},
		onLoad: function() {
			this.getChargeAssuranceLists()
			// 服务项提交
		},
		computed: {
			...mapGetters(["BillInfo", 'ChargeAssuranceList']),
			...mapState(['user', ]),
			otherItem() {
				if (this.BillInfo.billInfo.itemIs && this.BillInfo.billInfo.itemIs.length > 0) return true
				else if (this.BillInfo.billInfo.itemIIs && this.BillInfo.billInfo.itemIIs.length > 0)
					return true
				else return false
			}
		},
		watch: {
			ChargeAssuranceLists: {
				handler(val) {
					// 在这里处理变化后的逻辑
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			// 服务项初始化
			getChargeAssuranceLists() {
				// number 次数  time 时长 usersTime 人工时 usage 用量
				// items    timeItems  itemIs  itemIIs
				let chargeList = []
				if (this.BillInfo.billInfo.items) chargeList = chargeList.concat(this.BillInfo.billInfo.items.map(item =>
					item.chargeName), )
				if (this.BillInfo.billInfo.timeItems) chargeList = chargeList.concat(this.BillInfo.billInfo.timeItems.map(
					item => item.chargeName), )
				// if (this.BillInfo.billInfo.itemIs) chargeList = chargeList.concat(this.BillInfo.billInfo.itemIs.map(item =>
				// 	item.name), )
				// if (this.BillInfo.billInfo.itemIIs) chargeList = chargeList.concat(this.BillInfo.billInfo.itemIIs.map(
				// 	item => item.name), )
				this.ChargeAssuranceLists = JSON.parse(JSON.stringify(this.ChargeAssuranceList.filter(aditem => {
					if (aditem.chargeBillType == 'time' || aditem.chargeBillType == 'number')
						return true
					else false
				})))
				this.ChargeAssuranceLists.forEach(item => {
					if (chargeList.includes(item.chargeName))
						item.value = true
					else item.value = false
				})

			},
			// 提交服务项
			changeChargeList() {
				let codeList = [{
						arr: [],
						code: 'items',
						type: 'number'
					},
					{
						arr: [],
						code: 'timeItems',
						type: 'time'
					},
					// {
					// 	arr: [],
					// 	code: 'itemIs',
					// 	type: 'usersTime'
					// },
					// {
					// 	arr: [],
					// 	code: 'itemIIs',
					// 	type: 'usage'
					// },
				]
				let blob
				codeList.forEach((item) => {

					item.arr = this.ChargeAssuranceLists.filter(item2 => {
						if (item2.chargeBillType == item.type && item2.value == true)
							return true
						return false
					})

					// 过滤 列表中没有的服务项 删除
					this.BillInfo.billInfo[item.code] = this.BillInfo.billInfo[item.code].filter(val => {
						blob = item.arr.every(data => {
							if (data.chargeName != val.chargeName || data.chargeName != val.name)
								return true
							else return false
						})
						return !blob
					})

					// 新增：无则新增
					item.arr.forEach(item3 => {

						blob = this.BillInfo.billInfo[item.code].some(
							val => {
								if (val.chargeName == item3.chargeName || val.name == item3.chargeName)
									return true
								else return false
							})

						if (blob == false)
							this.BillInfo.billInfo[item.code].push({
								chargeName: item3.chargeName,
								name: item3.chargeName,
								chargeEnglish: item3.chargeEnglish,
							})
					})

				})
				this.show = false
			},
			// 点击服务项
			changeState(val) {
				// 响应式
				this.ChargeAssuranceLists = this.ChargeAssuranceLists.map(item => {
					if (val.id == item.id) {
						item.value = !item.value
					}
					return item
				})
			},
			// 变更选项
			groupChange(val, event) {
				// console.log(val, event)
				val.options.forEach(item => {
					if (item.elementName === event.target.value) {
						item.optionValue = true
					} else {
						item.optionValue = false
					}
				})
			},
			checkboxChange(val, event) {
				console.log(val, event)
				val.options.forEach(item => {
					if (event.target.value.includes(item.elementName)) {
						item.optionValue = true
					} else {
						item.optionValue = false
					}
				})
			},
			// 签字
			submit(val) {
				this.showSign = false;
				// 格式化时间
				this.BillInfo.signatureTimeStr = dayjs().format('YYYY/MM/DD HH:mm:ss');
				this.BillInfo.signatoryName = this.user.user.nickName || '刘培'
				this.signImg = val
			},
			// 保存提交数据
			async save() {
				let params = JSON.parse(JSON.stringify(this.BillInfo))
				params.billInfo = JSON.stringify(params.billInfo)
				params.signatory = params.signatory || this.signImg

				let res = await httpAction('/system/receipt', params, 'put')
				this.$tab.reLaunch('/pages/signBill/index')
			},

			// 点击日历
			changeItem(item, label) {
				this.showTiem = true
				this.activeItem = item
				this.activeItem.labels = label
			},

			// 选择时间
			confirm(val) {
				this.activeItem[this.activeItem.labels] = this.formatDateTime(val.value)
				if (this.user.user.nickName) this.activeItem.name = this.user.user.nickName || '刘培'
				this.showTiem = false
			},
			// 计算时长
			timeLang(item) {
				const start = new Date(item.start);
				const end = new Date(item.end);

				// 计算时间差（以毫秒为单位）
				const timeDiff = end - start;

				// 将时间差转换为小时
				const hoursDiff = Math.round(timeDiff / (1000 * 60));
				if (hoursDiff >= 0) {
					item.time = hoursDiff
					return `${hoursDiff} 分钟`;
				} else {
					item.start = null
					item.end = null
				}
			},
			// 取消选择
			close() {
				this.showTiem = false
			},
			formatDateTime(data) {
				const date = new Date(data);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');

				const formattedDateTime = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
				return formattedDateTime;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 新增服务项
	.serviceList {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;

		.serviceItem {
			width: 32%;
			display: flex;
			flex-direction: column;
			text-align: center;
			margin-right: 1%;
			margin-bottom: 3px;
			position: relative;

			.item {
				height: 80px;
				padding: 10px;
				border-radius: 5px;
			}

			view {
				font: normal 500 16px PingFangSC-Medium;
			}

			span {
				display: block;
				font: normal 400 12px PingFangSC-Medium;
			}

			image {
				width: 20px;
				height: 15px;
				position: absolute;
				right: 0;
				top: 4px;
			}
		}
	}

	// 弹窗
	.modal {
		position: absolute;
		top: 44px;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);

		.modalItem {
			position: absolute;
			top: 20%;
			left: 3%;
		}

		.msg {
			display: flex;
			width: 100%;
			margin-top: 5px;

			.btn_left {
				width: 40%;

				border-color: #5479fe;
				background: #5479fe;
				border-radius: 15px;
			}

			.btn_right {
				width: 40%;

				border-color: #144ea2;
				background: #144ea2;
				border-radius: 15px;
			}
		}
	}

	// 图标
	.img {
		width: 16px;
		height: 14px;
		margin-right: 5px
	}

	.btn {
		border-radius: 15px;
		color: #134DA1 !important;
		border-color: #134DA1;
	}

	::v-deep .u-collapse-item__content__text {
		padding: 0;
	}

	::v-deep .u-line {
		border: none !important;
	}

	span {
		color: #5F5F5F;
		font: normal 700 14px "PingFang-SC-Heavy";
	}

	.itemList {
		.item {
			display: flex;
			justify-content: space-between;
			min-height: 30px;
			padding: 10px;
			align-items: center;
			background: #fff;


			// 航班信息
			.left1 {
				font: normal 400 14px 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
				color: #5F5F5F;
				width: 30%;
			}

			.right1 {
				font: normal 550 14px 'PingFang-SC-Heavy';
				color: #5F5F5F;
				width: 70%;
				text-align: right;
			}

			.item-box {
				position: relative;
				display: flex;
				padding: 5px 0px;
				margin-bottom: 0px;

				&:not(:last-child) {
					border-bottom: 1px solid #e7e7e7;
				}

				.item-label {
					width: 150px;
					margin-top: 8px;
					// text-align: left; 
					// align-items: center;
					// display: flex;
				}

				.radio-group {
					width: 100%;
					text-align: right;
				}
			}

			// 航班性质
			.right2 {
				font: normal 200 12px 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
				color: #666666;
				width: 50%;
				text-align: right;

				::v-deep .u-checkbox-group--row {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					width: 100%;
					justify-content: space-between;

				}

				::v-deep .u-checkbox-label--left {
					flex-direction: row;
					margin-bottom: 10px;
				}

				::v-deep .u-radio-group--row {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					width: 100%;
					justify-content: space-between;

				}

				::v-deep .u-radio {
					flex-wrap: wrap;
					margin-bottom: 10px
				}
			}

			// 特种设备
			.left3 {
				font: normal 200 12px 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
				color: #999999;
			}

			.left3:hover {
				color: #12aa51;
			}

			.right3 {
				.man {}
			}

		}

		.item2 {
			display: flex;
			flex-direction: column;
			min-height: 30px;
			padding: 10px;
			background: #fff;

			.box {
				display: flex;
				justify-content: space-between;
				padding: 10px 0;
				align-items: center;
			}

			.btn {}

			span {
				width: 50%;
				display: inline-block;
				font-weight: 400;
			}
		}

		.itemHead {
			display: flex;
			justify-content: space-between;
			background: #f5f5f5;
			padding: 10px 20px;
			color: #144EA2;
		}

	}

	// 底部
	.formTitle {
		padding: 5px 10px;

		.msg {
			display: flex;
			margin-bottom: 15px;
			justify-content: space-between;

			span {
				color: #AEAEAE;
				font: normal 400 12px 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			}

			.btn_left {
				width: 55%;
				height: 60px;
				font-size: 18px;
				border-color: #5479fe;
				background: #5479fe;
			}

			.btn_right {
				width: 35%;
				height: 60px;
				font-size: 18px;
				border-color: #144ea2;
				background: #144ea2;
			}

			.btn_mid {
				width: 90%;
				height: 60px;
				font-size: 18px;
				border-color: #5479fe;
				background: #5479fe;
			}
		}


	}

	::v-deep .u-radio-group--row {
		justify-content: space-around !important;
	}
</style>